<template>
  <div
    class="con"
    :style="{ backgroundImage: `url(${bg})`, backgroundSize: '100% 100% ' }"
  >
    <div class="con-form">
      <el-form
        ref="ruleFormRef"
        :model="data.ruleForm"
        :hide-required-asterisk="true"
        status-icon
        :rules="data.rules"
        label-width="100px"
        class="con-form-ruleForm"
      >
        <el-form-item label="账号" prop="user">
          <el-input v-model.number="data.ruleForm.user" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="data.ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="验证密码" prop="checkPass">
          <el-input
            v-model="data.ruleForm.checkPass"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref ,defineComponent,getCurrentInstance  } from "vue";
// 引入router
import { useRouter } from "vue-router";
// 引入背景图片
import bg from "@/assets/background.png";
// 类型判别
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { InitData } from "../types/login";
// 引入接口测试
import { login } from "@/api/api";
// 引入 pinia vuex
// import { useStore } from "../store";
// const store=useStore()

// const instance = getCurrentInstance();

// console.log(instance?.proxy?.$http.login());


const ruleFormRef = ref<FormInstance>();
// console.log(import.meta.env.VITE_BASE_URL,'url');
const router = useRouter();

const data = reactive(new InitData());
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let result: any = await login(data.ruleForm);
      console.log(result, "msg");
      if (result.code == 200) {
        ElMessage.success(result.msg);
        router.push({
          path: "/home",
        });
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="less">
.con {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &-form {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #fff;
    background: #fff;
    margin-top: 250px;
    border-radius: 15px;
    &-ruleForm {
      margin: 20px 20px 20px 0;
    }
  }
}
</style>